<template>
  <div class="mv-container">
    <my-scroll>
      <div class="outter">
        <div class="btn" @click="exit">
          <i class="iconfont icon-close"></i>
          <!-- <i class="fa fa-window-close"></i> -->
        </div>
        <div class="innerbox">
          <div class="mv-wrap">
            <!-- mv -->

            <div class="title_box">
              <span class="iconfont icon-zuoyou" @click="prev"></span>
              <span class="mv">MV</span>
              <span class="mv_title">{{ mvInfo.name }}</span>
            </div>
            <div id="video_wrap">
              <video controls autoplay :src="mvUrl"></video>
            </div>
            <div class="btn_box">
              <div class="my_btn">
                <span class="iconfont icon-zan1"></span>
                <span>赞({{ mvInfo.likeCount ? mvInfo.likeCount : 0 }})</span>
              </div>
              <div class="my_btn">
                <span class="iconfont icon-shoucang"></span>
                <span>收藏({{ mvInfo.subCount }})</span>
              </div>
              <div class="my_btn">
                <span class="iconfont icon-fenxiang"></span>
                <span>分享({{ mvInfo.shareCount }})</span>
              </div>
              <div class="my_btn">
                <span class="iconfont icon-pinglun"></span>
                <span>评论({{ mvInfo.commentCount }})</span>
              </div>
            </div>
            <div class="comment_box">
              <div
                class="comment-wrap"
                v-if="hotComments !== undefined && hotComments.length !== 0"
              >
                <p class="title">
                  精彩评论
                  <span class="number">({{ hotComments.length }})</span>
                </p>
                <div class="comments-wrap">
                  <!-- 评论 -->
                  <div
                    class="item"
                    v-for="(item, index) in hotComments"
                    :key="index"
                  >
                    <div class="icon-wrap">
                      <!-- 头像 -->
                      <img :src="item.user.avatarUrl + '?param=50y50'" alt />
                    </div>
                    <div class="content-wrap">
                      <div class="content">
                        <span class="name">{{ item.user.nickname }}</span>
                        <span class="comment">：{{ item.content }}</span>
                      </div>
                      <!-- 回复 -->
                      <div class="re-content" v-if="item.beReplied.length != 0">
                        <span class="name">{{
                          item.beReplied[0].user.nickname
                        }}</span>
                        <span class="comment"
                          >：{{ item.beReplied[0].content }}</span
                        >
                      </div>
                      <div class="date">{{ item.time | dateFormat }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 最新评论 -->
              <div class="comment-wrap">
                <p class="title">
                  最新评论
                  <span class="number">({{ total }})</span>
                </p>
                <div class="comments-wrap">
                  <!-- 评论 -->
                  <div
                    class="item"
                    v-for="(item, index) in comments"
                    :key="index"
                  >
                    <div class="icon-wrap">
                      <!-- 头像 -->
                      <img :src="item.user.avatarUrl + '?param=50y50'" alt />
                    </div>
                    <div class="content-wrap">
                      <div class="content">
                        <span class="name">{{ item.user.nickname }}</span>
                        <span class="comment">：{{ item.content }}</span>
                      </div>
                      <!-- 回复 -->
                      <div
                        class="re-content"
                        v-if="item.beReplied.length !== 0"
                      >
                        <span class="name">{{
                          item.beReplied[0].user.nickname
                        }}</span>
                        <span class="comment"
                          >：{{ item.beReplied[0].content }}</span
                        >
                      </div>
                      <div class="date">{{ item.time | dateFormat }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- mv信息 -->
          </div>
          <div class="info_box">
            <div class="info-wrap">
              <div class="info_title">MV简介</div>
              <div class="date_box">
                <span class="date">发布：{{ mvInfo.publishTime }}</span>
                <span class="number"
                  >播放：{{ mvInfo.playCount | playCount }}次</span
                >
              </div>
              <div class="desc">简介：{{ desc }}</div>
            </div>
            <div class="other">
              <h3>相关推荐</h3>
              <div class="items">
                <div
                  class="item"
                  @click="toMv(item.id)"
                  v-for="(item, index) in mvs"
                  :key="index"
                >
                  <div class="img-wrap">
                    <img :src="item.cover" alt />
                    <div class="num-wrap">
                      <span class="iconfont icon-shipin"></span>
                      <span class="num">{{ item.playCount | playCount }}</span>
                    </div>
                  </div>
                  <div class="info-wrap">
                    <div class="name">{{ item.name }}</div>
                    <div class="duration">
                      {{ item.duration | playTimeFormat }}
                    </div>
                    <div class="singer">{{ item.artistName }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </my-scroll>
  </div>
</template>

<script>
import { GetSingleMv, GetMvDetail, MvAuthor } from "../../api/music"
import request from "../../api/request"
import { mapGetters } from "vuex"
export default {
  name: "mv",
  data() {
    return {
      id: null,
      // 总条数
      total: 20,
      // 页码
      page: 1,
      // 页容量
      limit: 10,
      desc: "",
      mvUrl: "",
      mvInfo: {},
      songer: {},
      comments: [],
      hotComments: [],
      total: 0,
      mvs: [],
    }
  },
  watch: {
    $route: function(newVal, oldVal) {
      this.id = this.$route.query.id
      this.getMv()
      this.getInfo()
      this.getOther()
      this.getComments()
    },
  },
  created() {
    this.id = this.$route.query.id
    this.getMv()
    this.getInfo()
    this.getOther()
    this.getComments()
    if (this.getState) {
      this.$store.commit("play_pause")
    }
  },
  computed: {
    // vue辅助函数
    ...mapGetters(["getState"]),
  },
  methods: {
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
    },
    async getMv() {
      const res = await GetSingleMv({
        id: this.id,
      })
      this.mvUrl = res.data.url
    },
    async getInfo() {
      const res = await GetMvDetail({
        mvid: this.id,
      })
      this.mvInfo = res.data
      this.desc = res.data.desc
      if (res.data.desc && this.desc != "" && this.desc.length > 200) {
        this.desc = this.cutstr(this.desc, 200)
      } else if (!this.desc) {
        this.desc = "暂无简介"
      }
      this.getSonger()
    },
    async getSonger() {
      const res = await MvAuthor({
        id: this.id,
      })
      this.songer = res.artist
    },
    async getOther() {
      let res = await request({
        url: "/simi/mv",
        method: "get",
        data: {
          mvid: this.id,
        },
      })
      this.mvs = res.mvs
    },
    // 获取评论
    async getComments() {
      let res = await request({
        url: "/comment/mv",
        data: {
          id: this.id,
        },
        method: "get",
      })
      this.comments = Object.freeze(res.comments)
      this.hotComments = Object.freeze(res.hotComments)
      this.total = Object.freeze(res.total)
    },
    toMv(id) {
      this.$router.push(`/details?id=${id}`)
    },
    prev() {
      this.$router.go(-1)
    },
    // 退出音乐界面（返回首页）
    exit() {
      this.$router.push("/musichome")
    },
    // 截取字符串
    cutstr(str, len) {
      var str_length = 0
      var str_len = 0
      var str_cut = new String()
      var str_len = str.length
      for (var i = 0; i < str_len; i++) {
        var a = str.charAt(i)
        str_length++
        if (escape(a).length > 4) {
          //中文字符的长度经编码之后大于4
          str_length++
        }
        str_cut = str_cut.concat(a)
        if (str_length >= len) {
          str_cut = str_cut.concat("...")
          return str_cut
        }
      }
      //如果给定字符串小于指定长度，则返回源字符串；
      if (str_length < len) {
        return str
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../scss/common.scss";
.mv-container {
  position: fixed;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 100;
}
.outter {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  .btn {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .btn:hover {
    cursor: pointer;
  }
}
.innerbox {
  width: 100%;
  max-width: 1200px;
  display: flex;
  padding: 20px;
  box-sizing: border-box;

  .mv-wrap {
    width: calc(100% - 350px);

    .title_box {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .iconfont:hover {
        cursor: pointer;
      }
      span {
        font-size: 23px;
        font-weight: bold;
      }
      .mv {
        font-size: 15px;
        color: white;
        background: $primary;
        padding: 2px 5px;
        border-radius: 5px;
        margin: 0px 10px;
      }
    }
    #video_wrap {
      width: 100%;
      margin-bottom: 20px;
      video {
        width: 100%;
      }
    }
    .btn_box {
      display: flex;
      margin-bottom: 20px;
      .my_btn {
        margin-right: 20px;
        border: 1px solid #ccc;
        height: 30px;
        padding: 0 10px;
        border-radius: 5px;
        span {
          height: 30px;
          line-height: 30px;
          font-size: 13px;
        }
        .iconfont {
          font-size: 16px;
        }
      }
    }

    .my_btn:hover {
      cursor: pointer;
    }
    .comment_box {
      width: 100%;
    }
    .comment-wrap {
      width: 100%;
      margin-bottom: 30px;
      .title {
        font-size: 20px;
        .number {
          color: black;
          font-size: 18px;
        }
      }
      .item {
        display: flex;
        padding-top: 20px;

        .icon-wrap {
          margin-right: 15px;
          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }
        .date {
          color: #bebebe;
          font-size: 14px;
          text-align: left;
        }
        .content {
          text-align: left;
          word-wrap: break-word;
          word-break: normal;
        }
        .content-wrap {
          width: 100%;
          padding-bottom: 20px;
          flex: 1;
          .name {
            color: #517eaf;
            font-size: 14px;
          }
          .comment {
            font-size: 14px;
          }
          .content,
          .re-content {
            margin-bottom: 10px;
          }
          .re-content {
            text-align: left;
            padding: 10px;
            background-color: #e6e5e6;
            border-radius: 5px;
          }
        }
      }
      .item:not(:last-child) .content-wrap {
        border-bottom: 1px solid #f2f2f1;
      }
    }
  }
  .info_box {
    width: 350px;
    padding: 0px 20px;
    box-sizing: border-box;
    .info_title {
      font-size: 23px;
      font-weight: bold;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
    }

    .date_box {
      padding-top: 10px;
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      .date {
        margin-right: 0.625rem;
        color: #bebebe;
        font-size: 14px;
      }
      .number {
        color: #bebebe;
        font-size: 14px;
      }
    }
    .desc {
      font-size: 15px;
      color: rgb(87, 86, 86);
      line-height: 25px;
    }
  }
}
.other {
  padding-top: 20px;
  .items {
    width: 100%;
    .item {
      display: flex;
      padding-top: 10px;
      .img-wrap {
        width: 50%;
        height: 100px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .num-wrap {
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          height: 25px;
          padding: 0 10px;
          box-sizing: border-box;
          background: rgba(0, 0, 0, 0.3);
          text-align: right;
          span {
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            color: white;
          }
        }
      }
      .info-wrap {
        width: 50%;
        padding-left: 10px;
        box-sizing: border-box;
        div {
          font-size: 15px;
        }
        .duration {
          padding-top: 10px;
          padding-bottom: 5px;
          color: rgb(114, 114, 114);
        }
        .singer {
          color: rgb(114, 114, 114);
        }
      }
    }
    .item:hover {
      cursor: pointer;
    }
  }
}
@media (min-width: 600px) {
  .innerbox {
    min-width: 1100px;
    width: 100% !important;
  }
}
@media (max-width: 600px) {
  .outter {
    .btn {
      display: none;
    }
  }
  .innerbox {
    width: 100vw !important;
    padding: 0px 10px;
    padding-top: 20px;
    box-sizing: border-box;
    .mv-wrap {
      width: 100%;
      .title_box {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .iconfont:hover {
          cursor: pointer;
        }
        span {
          font-size: 0.9375rem;
          font-weight: bold;
        }
        .mv {
          font-size: 0.8125rem;
          color: white;
          background: $primary;
          padding: 2px 5px;
          border-radius: 5px;
          margin: 0px 10px;
        }
      }
      #video_wrap {
        width: 100%;
        margin-bottom: 20px;
        video {
          width: 100% !important;
        }
      }
      .btn_box {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        .my_btn {
          margin-right: 20px;
          border: 1px solid #ccc;
          height: 30px;
          padding: 0 10px;
          border-radius: 5px;
          margin-bottom: 5px;
          span {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
          }
          .iconfont {
            font-size: 16px;
          }
        }
      }
    }
    .info_box {
      display: none;
    }
  }
  .other {
    padding-top: 20px;
    .items {
      width: 100%;
      .item {
        display: flex;
        padding-top: 10px;
        .img-wrap {
          width: 50%;
          height: 100px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .num-wrap {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 25px;
            padding: 0 10px;
            box-sizing: border-box;
            background: rgba(0, 0, 0, 0.3);
            text-align: right;
            span {
              height: 25px;
              line-height: 25px;
              font-size: 14px;
              color: white;
            }
          }
        }
        .info-wrap {
          width: 50%;
          padding-left: 10px;
          box-sizing: border-box;
          div {
            font-size: 15px;
          }
          .duration {
            padding-top: 10px;
            padding-bottom: 5px;
            color: rgb(114, 114, 114);
          }
          .singer {
            color: rgb(114, 114, 114);
          }
        }
      }
      .item:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
